<template>
  <div class="h5-chat">
    <div class="messages" ref="messagesRef">
      <div
        v-for="msg in messages"
        :key="msg.id"
        class="message-item"
        :class="{ 'message-self': msg.sender === '我' }"
      >
        <img :src="msg.avatar" :alt="msg.sender" class="avatar" />
        <div class="message-content">
          <span class="sender">{{ msg.sender }}</span>
          <div class="text">{{ msg.content }}</div>
        </div>
      </div>
    </div>

    <div class="input-area">
      <input
        v-model="inputMessage"
        type="text"
        placeholder="发送消息..."
        @keyup.enter="sendMessage"
      />
      <button @click="sendMessage">
        <el-icon><Position /></el-icon>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
import { Position } from "@element-plus/icons-vue";

const props = defineProps({
  messages: Array,
});

const emit = defineEmits(["send"]);
const inputMessage = ref("");
const messagesRef = ref(null);

// 监听消息变化，自动滚动到底部
watch(
  () => props.messages,
  () => {
    setTimeout(() => {
      if (messagesRef.value) {
        messagesRef.value.scrollTop = messagesRef.value.scrollHeight;
      }
    }, 0);
  },
  { deep: true }
);

const sendMessage = () => {
  if (inputMessage.value.trim()) {
    emit("send", inputMessage.value);
    inputMessage.value = "";
  }
};
</script>

<style lang="scss" scoped>
.h5-chat {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #14152b;

  .messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;

    .message-item {
      display: flex;
      gap: 8px;
      margin-bottom: 16px;

      &.message-self {
        flex-direction: row-reverse;

        .message-content {
          align-items: flex-end;

          .text {
            background: #4080ff;
          }
        }
      }

      .avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        flex-shrink: 0;
      }

      .message-content {
        display: flex;
        flex-direction: column;
        gap: 4px;
        max-width: 70%;

        .sender {
          font-size: 12px;
          color: rgba(255, 255, 255, 0.6);
        }

        .text {
          padding: 8px 12px;
          background: rgba(255, 255, 255, 0.1);
          border-radius: 4px;
          font-size: 14px;
          line-height: 1.4;
          word-break: break-word;
        }
      }
    }
  }

  .input-area {
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    gap: 8px;

    input {
      flex: 1;
      height: 36px;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      border-radius: 18px;
      padding: 0 16px;
      color: #fff;
      font-size: 14px;

      &::placeholder {
        color: rgba(255, 255, 255, 0.3);
      }

      &:focus {
        outline: none;
        background: rgba(255, 255, 255, 0.15);
      }
    }

    button {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #4080ff;
      border: none;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;

      &:active {
        transform: scale(0.95);
      }
    }
  }
}
</style>
